<template>
  <div id="jifenid" class="jfcharts">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      tableData:[],
      newList:[],
      keys:[]
    };
  },
  mounted(){
  this.getyhqufzb()
  },
  methods:{
    getEchartsjifen(arr){
      var myChart = echarts.init(document.getElementById('jifenid'));
       // 指定图表的配置项和数据
       var option = {
        title: {
          text: '已发放积分用户占比',
          left: 'center'
        },
        legend: {
          top: '10%',
          left: 'center',
        },
        series: [
    {
      top: '20%',
      type: 'pie',
      radius: '65%',
      center: ['50%', '50%'],
      selectedMode: 'single',
      data: arr,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getyhqufzb(){
      this.$http.post("/index.php/api/yhqjfzb").then(res => {
        if (res.code == 200) {
          for(var key in res.data){
            this.tableData.push(res.data[key])
          }
          this.tableData.forEach(item => {
            this.newList.push(item[0])
          });
          let arr=[];
          for(let i in this.newList){
            arr.push({
              name:this.newList[i].jfd,
              value:this.newList[i].total
            })
          }
          console.log(arr,'aaaaaaaaaaaaaa');
          this.getEchartsjifen(arr)
        }
      })
    },
  }
}
</script>

<style>
.jfcharts{
  width: 500px;
  height: 400px;
  background-color: #fefefe;
}
</style>